<script setup lang="ts">
import { ref } from "@vue/reactivity";
import headers from "@/components/common/headers.vue";
import footers from "@/components/common/footers.vue";
import pagenum from "@/components/common/pagenum.vue";

let navsList = ["新闻通知", "工作动态", "政策法规", "典型案例", "公司公告"];
let navsIndex = ref(0);
let list = Array(10).fill({
  content: "南宁市委统战部到良庆区调研侨务和海外统战",
  time: "10-25",
});
</script>

<template>
  <div class="newNotice">
    <headers nexts="新闻通知" />
    <div class="mains">
      <div class="navs">
        <div
          :class="navsIndex == k ? 'selectNavs' : ''"
          @click="navsIndex = k"
          v-for="(v, k) of navsList"
          :key="k"
        >
          {{ v }}
        </div>
      </div>
      <div class="content">
        <h1>{{ navsList[navsIndex] }}</h1>
        <ul>
          <li class="item" v-for="(v, k) of list" :key="k">
            <span class="dian">&#xec1e;</span>
            <p class="txt">{{ v.content }}</p>
            <span class="time">{{ v.time }}</span>
          </li>
        </ul>

        <!-- 页码数 -->
        <pagenum />
      </div>
    </div>
    <footers />
  </div>
</template>

<style scoped lang="scss">
.newNotice {
  padding-top: 45px;
  // 背景图片
  background: #f1f2f3 url("@/assets/my/bg.webp") no-repeat fixed center top;
  background-size: 100% 380px;

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px 0px;
}

.mains {
  width: 1000px;
  margin-bottom: 38px;
  display: flex;
  color: #333333;
  gap: 0px 16px;
  > div {
    background-color: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    border: 1px solid #f2f6fc;
    font-size: 14px;
  }
}

.navs {
  flex: 0 0 190px;
  align-self: flex-start;
  padding: 16px 0px;
  display: flex;
  flex-direction: column;
  > div {
    cursor: pointer;
    height: 50px;
    @include flexCenterCenter;
    transition: all 0.3s;
  }
  .selectNavs {
    background-color: #eff9ff;
    color: #2163e0;
  }
}

.content {
  width: 784px;
  height: 794px;
  padding: 24px;
  h1 {
    font-size: 20px;
    font-weight: 600;
  }

  ul {
    margin: 24px 0px;
  }
}

.item {
  width: 100%;
  height: 60px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 0px 14px;
  border-top: 1px solid #ebeef5;
  cursor: pointer;
  transition: all 0.25s;
  &:last-of-type {
    border-bottom: 1px solid #ebeef5;
  }
  &:hover {
    color: #2163e0;
    background-color: #eff9ff;
  }
}

// 小点
.dian {
  font-size: 12px;
  // display: inline-block;
  // transform: scale(0.5);
  color: #333333;
}

// 文本内容
.txt {
  flex: 1 1 auto;
  @include transcendLine(1);
}

.time {
  flex: 0 0 45px;
  text-align: right;
  font-size: 14px;
  color: #90949e;
}
</style>
